<template>
    <div class="common-layout">
        <el-container>
            <el-header :class="{ 'backgroudColor': !isBool }">
                <div class="show" :class="{ 'backgroudColor': !isBool }">
                    <span :class="{ 'TextColor': !isBool }">
                        {{ handline }}&nbsp;-&nbsp;Shiina's Blog
                    </span>
                </div>
                <div class="ghost" :class="{ 'backgroudColor': !isBool }">
                    <div class="text">
                        <span :class="{ 'TextColor': !isBool }">
                            Shiina's Blog
                        </span>
                    </div>
                    <div class="pageHeader" :class="{ 'TextColor': !isBool }">
                        <div @click="ck('about', '首页')">
                            <el-icon>
                                <House />
                            </el-icon>
                            <span>首页</span>
                        </div>
                        <div @click="ck('homepage', '博客')">
                            <el-icon>
                                <Connection />
                            </el-icon>
                            <span>博客</span>
                        </div>
                        <div @click="ck('personal', '关于')">
                            <el-icon>
                                <Avatar />
                            </el-icon>
                            <span>关于</span>
                        </div>
                        <div class="pattern" @click="Switch" :class="{ 'TextColor': !isBool }">
                            <div v-if="isBool">
                                <el-icon>
                                    <Sunny />
                                </el-icon>
                            </div>
                            <div v-if="!isBool">
                                <el-icon>
                                    <Moon />
                                </el-icon>
                            </div>
                        </div>
                        <div class="pictrue">
                            <el-dropdown>
                                <img src="../assets/QQ图片20230425204111.jpg" alt="">
                                <template #dropdown>
                                    <el-dropdown-menu>
                                        <el-dropdown-item @click="logOutOfLogin">退出登录</el-dropdown-item>
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                        </div>
                    </div>
                </div>
            </el-header>
            <el-main>
                <router-view></router-view>
            </el-main>
            <el-footer :class="{ 'backgroudColor': !isBool }">
                <span :class="{ 'TextColor': !isBool }">
                    Powered by Astro & Vue
                </span>
                <span :class="{ 'TextColor': !isBool }">
                    Github Link
                </span>
            </el-footer>
        </el-container>
    </div>
</template>

<script setup>
import { ElNotification } from 'element-plus'
import { useRouter } from "vue-router";
import { useRoute } from 'vue-router';
import { provide, ref } from 'vue'
const router = useRouter()
const route = useRoute()
let handline = ref('博客')
let isBool = ref(true)
// 组件传值
provide('Bool', isBool)
provide('title', handline)
function ck(name, title) {
    // 大头标题
    handline.value = title
    // 页面跳转
    router.push({ name: name })
}
function Switch() {
    isBool.value = !isBool.value
}
// 退出登录
function logOutOfLogin() {
    // 清空本地存储的登录所用的数据
    localStorage.removeItem('用户名');
    localStorage.removeItem('密码');
    // 跳转到登录页面
    router.push({ name: 'login' })
    ElNotification({
        title: 'Success',
        message: '退出成功',
        type: 'success',
    })
}
</script>

<style lang="less" scoped>

.common-layout {
    width: 100vw;
    height: 100vh;
}

.ghost {
    background-color: @subjectcolor;
}

.el-container {
    width: 100vw;
    height: 100vh;

    .el-header {
        position: relative;
        --el-header-padding: 0 0;
        background-color: @subjectcolor;

        .show {
            position: absolute;
            margin: auto;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
            box-shadow: 0 2px 5px #0003, 0 2px 10px #0003;

            span {
                font-size: 25px;
                font-weight: 600;
            }
        }

        .ghost {
            margin: auto;
            display: flex;
            justify-content: space-around;
            width: 100vw;
            height: 100%;
            transform: translateY(-60px);
            transition: all 0.3s ease;
            box-shadow: 0 2px 5px #0003, 0 2px 10px #0003;

            .text {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 200px;
                margin-right: 400px;

                span {
                    font-size: 25px;
                    font-weight: 600;
                }
            }

            .pageHeader {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 400px;

                .pictrue {
                    width: 45px;
                    height: 45px;
                    border-radius: 50%;
                    overflow: hidden;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }

                div {
                    cursor: pointer;
                    width: 60px;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    span {
                        font-size: 15px;
                        font-weight: 600;
                    }

                    .el-icon {
                        font-size: 15px;
                    }
                }

                div:hover {
                    color: @fontcolor;
                }
            }

            .pattern {
                position: relative;

                div {
                    position: absolute;

                    .el-icon {
                        font-size: 20px;
                    }
                }
            }
        }
    }

    .el-header:hover {
        .ghost {
            transform: translateY(0px);
        }
    }

    .el-main {
        // 渐变背景
        background-image: -webkit-linear-gradient(0deg,
                #e42c64,
                #FF2E63,
                #7A57D1,
                #50C1E9);
        height: calc(100vh - 60px);
    }
}

.el-footer {
    transition: all 0.3s linear;
    background-color: @subjectcolor;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: 500;
}

.backgroudColor {
    background-color: @changesubcolor;
}

.TextColor {
    color: white;
}
</style>